<template>
    <div class="app-container home">
      <div>
        <div class="dhas">
          <div class="sx">
            <p style="text-align: center; font-size: 18px; font-weight: 700">
              当天及第二天10点前
            </p>
  
           <div v-if="data.remindVos">
            <el-alert 
              style="margin-top: 5px"
              v-for="(item, index) in data.remindVos"
              :key="index"
              :closable="false"
              :title="panduan(item.submissionTask, item.studentDeadlineTask)"
              :type="ad(panduan(item.submissionTask, item.studentDeadlineTask))"
              :description="`
              单号：${item.orderNumber} \xa0\xa0\xa0\xa0
              客户昵称：${item.customerNickname}\xa0\xa0\xa0\xa0
              老师:${item.teacherName}\xa0\xa0\xa0\xa0
              交稿时间：
              ${item.submissionTask}
              截止时间：
              ${item.deadlineTask}`"
              :show-icon="false"
            >
            </el-alert>
           </div>
          </div>
          <div class="sx">
            <p style="text-align: center; font-size: 18px; font-weight: 700">
              明天及后天10点前
            </p>
  <div v-if="data.orderRemindVos">
    <el-alert
              style="margin-top: 5px"
              v-for="(item, index) in data.orderRemindVos"
              :key="index"
              :closable="false"
              title="明天及后天"
              :type="ad(panduan(item.submissionTask, item.studentDeadlineTask))"
              :description="`
              单号：${item.orderNumber} \xa0\xa0\xa0\xa0
              客户昵称：${item.customerNickname}\xa0\xa0\xa0\xa0
              老师:${item.teacherName}\xa0\xa0\xa0\xa0
              交稿时间：
              ${item.submissionTask}
              截止时间：
              ${item.deadlineTask}
              `"
              :show-icon="false"
            >
            </el-alert>
  </div>
            
          </div>
        </div>
  
        <div class="dhas" style="margin-top: 20px">
          <div class="sx">
            <p style="text-align: center; font-size: 18px; font-weight: 700">
              学生已退，老师未记录
            </p>
  <div v-if="data.orderFormList">
    <el-alert
              style="margin-top: 5px"
              v-for="(item, index) in data.orderFormList"
              :key="index"
              :closable="false"
              title="学生已退，老师未记录"
              :type="ad(panduan(item.submissionTask, item.studentDeadlineTask))"
              :description="`
              单号：${item.orderNumber} \xa0\xa0\xa0\xa0
              老师：${item.teacherName}\xa0\xa0\xa0\xa0
             
              
           
              `"
              :show-icon="false"
            >
            </el-alert>
  </div>
          
          </div>
          <div class="sx">
            <p style="text-align: center; font-size: 18px; font-weight: 700">
              半小时未报价
            </p>
  <div v-if="data.NoQuotation">
    <el-alert
              style="margin-top: 5px"
              v-for="(item, index) in data.NoQuotation"
              :key="index"
              :closable="false"
            
              :type="ad(panduan(item.submissionTask, item.studentDeadlineTask))"
              :description="`
              询单号：${item} \xa0\xa0\xa0\xa0
             
              `"
              :show-icon="false"
            >
            </el-alert>
  </div>
           
          </div>
  
          <div class="sx">
            <p style="text-align: center; font-size: 18px; font-weight: 700">
              任务都交稿，但是仍有未收金额
            </p>
  <div    v-for="(item, index) in data.remindMoneyVos"
              :key="index">
    <el-alert
    v-if="data.remindMoneyVos&&item"
              style="margin-top: 5px"
            
              :closable="false"
              :type="ad(panduan(item.submissionTask, item.studentDeadlineTask))"
              :description="`
              单号：${item.orderNumber} \xa0\xa0\xa0\xa0
              金额：${item.outstandingAmount}\xa0\xa0\xa0\xa0
              `"
              :show-icon="false"
            >
            </el-alert>
  </div>
          
          </div>
        </div>
  
  
  
        <div class="dhas" style="margin-top: 20px">
          <div class="sx">
            <p style="text-align: center; font-size: 18px; font-weight: 700">
              本月对客服不满意的订单
            </p>
  
           <div v-if="data.serviceEvaluateReminds">
            <el-alert 
              style="margin-top: 5px"
              v-for="(item, index) in data.serviceEvaluateReminds"
              :key="index"
              :closable="false"
              type="warning"
              :description="`
              单号：${item.orderNumber} \xa0\xa0\xa0\xa0
              客服名称：${item.teacherName}\xa0\xa0\xa0\xa0
              订单服务满意度:${item.serviceEvaluate}\xa0\xa0\xa0\xa0
              订单时效满意度:${item.servicePrescriptionSatisfaction}\xa0\xa0\xa0\xa0
              是否愿意继续选择:${item.selectServiceAgain}\xa0\xa0\xa0\xa0
              `"
              :show-icon="false"
            >
            </el-alert>
           </div>
          </div>
          <div class="sx">
            <p style="text-align: center; font-size: 18px; font-weight: 700">
              本月对老师不满意的订单
            </p>
  <div v-if="data.teacherEvaluateReminds">
    <el-alert
              style="margin-top: 5px"
              v-for="(item, index) in data.teacherEvaluateReminds"
              :key="index"
              :closable="false"
              title=""
              type='warning'
              :description="`
              单号：${item.orderNumber} \xa0\xa0\xa0\xa0
              老师名称：${item.teacherName}\xa0\xa0\xa0\xa0
              订单服务满意度:${item.teacherContentSatisfaction}\xa0\xa0\xa0\xa0
              订单时效满意度:${item.teacherServiceSatisfaction}\xa0\xa0\xa0\xa0
              是否愿意继续选择:${item.teacherSelectAgain}\xa0\xa0\xa0\xa0`"
              :show-icon="false"
            >
            </el-alert>
  </div>
            
          </div>
        </div>本业
  
  
  
      </div>
      <el-divider />
      <div style="display: flex; justify-content: space-between">
        <div style="width: 29%">
          <span> 客诉/退款 </span>
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 100 }"
            placeholder="请输入内容"
            v-model="ti.complaint"
          >
          </el-input>
        </div>
        <div style="width: 29%">
          <span> 交接内容</span>
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 100 }"
            placeholder="请输入内容"
            v-model="ti.handoverContent"
          >
          </el-input>
        </div>
        <div style="width: 29%">
          <span> 待解决</span>
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 100 }"
            placeholder="请输入内容"
            v-model="ti.beSolved"
          >
          </el-input>
        </div>
      </div>
      <div style="width: 100%; display: flex; flex-direction: row-reverse">
        <div></div>
        <el-button
          style="width: 200px"
          type="primary"
          plain
          size="mini"
          @click="daic"
          v-hasPermi="['system:role:add']"
          >保存交接</el-button
        >
      </div>
    </div>
  </template>
  
  <script>
  import { tixing } from "../../api/new";
  import {
  
    geijiaojie,
    addgeijiaojie,
    addijiaojie
  } from "@/api/new";
  export default {
    name: "Index",
    data() {
      return {
        ti: {
          "remark": "",
              "recordId": null,
              "complaint": "",
              "handoverContent": "",
              "beSolved": ""
        },
        rtotll:0
      };
    },
    created() {
     
    },
    computed: {
      data() {
        return this.$store.state.user.tixin;
      },
    },
    created() {
      this.getjiaojie();
    },
    methods: {
      getjiaojie() {
        geijiaojie({ pageNo: 1, pageSize: 10 }).then((result) => {
          console.log(result.rows.length);
       this.rtotll=result.rows.total
       console.log(this.rtotll);
          if(result.rows.length) {
  
            this.ti.recordId=result.rows[0].recordId
            this.ti.complaint=result.rows[0].complaint
            this.ti.handoverContent=result.rows[0].handoverContent
            this.ti.beSolved=result.rows[0].beSolved
  
  
          }
        });
      },
      daic() {
        if(this.rtotll==0){
          addijiaojie({   complaint: this.ti.complaint,
          handoverContent: this.ti.handoverContent,
          beSolved: this.ti.beSolved}).then((result) => {
          this.getjiaojie();
          this.$modal.msgSuccess("保存成功");
        });
        }else{
          addgeijiaojie({
          recordId: this.ti.recordId,
          complaint: this.ti.complaint,
          handoverContent: this.ti.handoverContent,
          beSolved: this.ti.beSolved,
        }).then((result) => {
          this.getjiaojie();
          this.$modal.msgSuccess("保存成功");
        });
        }
     
      },
  
      ad(e) {
        if (e == "超过学生时间") return "error";
        if (e == "不足4小时") return "warning";
        if (e == "超时") return "warning";
  
        return "success";
      },
      panduan(inputTime, xuetime) {
        // 将传入的时间字符串转换为Date对象
        // 假设inputTime是ISO 8601格式的字符串，例如："2023-04-01T12:00:00Z"
        const inputDate = new Date(inputTime);
        const xue = new Date(xuetime);
        const now = new Date();
        const isAfterNosw = xue < now;
  
        // 获取当前时间的Date对象
        if (isAfterNosw) return "超过学生时间";
  
        // 比较是否超过当前时间
        const isAfterNow = inputDate < now;
  
        if (isAfterNow) return "超时";
        // 计算时间差（毫秒）
        const diff = inputDate - now;
  
        // 转换为小时（注意：这里假设一天有24小时）
        const diffInHours = diff / (1000 * 60 * 60);
  
        // 判断是否小于4小时
        const isLessThan4Hours = diffInHours < 4;
        if (isLessThan4Hours) return "不足4小时";
  
        return "当天及第二天10点前";
      },
      getti() {
        tixing().then((res) => {
       
          this.data = res.data;
        });
      },
      goTarget(href) {
        window.open(href, "_blank");
      },
    },
  };
  </script>
  
  <style scoped lang="scss">
  .dhas {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
  
    .sx {
      width: 49%;
      height: 300px;
      overflow-y: scroll;
      background: rgb(245, 244, 244);
    }
  }
  .home {
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }
    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }
    .col-item {
      margin-bottom: 20px;
    }
  
    ul {
      padding: 0;
      margin: 0;
    }
  
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;
  
    ul {
      list-style-type: none;
    }
  
    h4 {
      margin-top: 0px;
    }
  
    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }
  
    p {
      margin-top: 10px;
  
      b {
        font-weight: 700;
      }
    }
  
    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }
  </style>
  